import React from 'react';
import {inject, observer} from 'mobx-react';
import {withRouter,Route} from 'react-router-dom';
import {Accordion, Button, Icon, InputItem, List, Popover, Select, Tools,} from 'weaver-mobile';
import {Browser, BrowserHrm,RouteLayout} from 'weaver-mobile-page';

const getLabel = Tools.getLabel;
const FormItem = List.FormItem;
const Item = Popover.Item;
const ButtonGroup = RouteLayout.ButtonGroup;
/**
 * 待审核方案
 */
@inject('planAuditStore')
@withRouter
@observer
export default class Condition extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.planAuditStore;
    }

    render() {
        const {tabs,queryParams, planTypeData, subBrowser, deptBrowser, subBrowserValue, deptBrowserValue, includesubData, includedeptData, setState, onSearchChange, browserHrm, browserHrmValue} = this.store;
        return (
                <div className="wm-route-layout workrelate-condition workrelate-plan-result-condition">
                        <Accordion defaultActiveKey="0">
                            <Accordion.Panel header={getLabel(32905, "常用条件")} className="custom-header">
                                <List>
                                    <FormItem
                                        extra={<Icon type="editor" size="xxs"/>}
                                        label={getLabel(24986, "标题")}
                                        line
                                        noBorder
                                        content={<InputItem
                                            placeholder={getLabel(83869,"请输入")}
                                            value={queryParams.searchTitleValue}
                                            onChange={val => onSearchChange({'searchTitleValue': val})}
                                        />}
                                    />
                                </List>
                                <List>
                                    <FormItem
                                        noBorder
                                        content={
                                            <Select
                                                value={queryParams.searchDateType}
                                                options={planTypeData}
                                                label={getLabel(15386, "周期")}
                                                onChange={val => onSearchChange({'searchDateType': val})}
                                            />}
                                    />
                                </List>
                                <List>
                                    <BrowserHrm
                                        store={browserHrm}
                                        isSingle={false}
                                        hasAdvanceSerach
                                        label={getLabel(30042, "人员")}
                                        type={1}
                                        onChange={(...arg) => {
                                            onSearchChange({searchHumSelectValue: arg[0]})
                                            setState({browserHrmValue: arg[2]})
                                        }}
                                        valueArray={browserHrmValue}
                                    />
                                </List>
                                <List className='border-none'>
                                    <FormItem
                                        noBorder
                                        line
                                        content={
                                            <Select
                                                value={queryParams.searchIncludeSubSelectValue}
                                                options={includesubData}
                                                label={getLabel(33553, "分部")}
                                                onChange={val => onSearchChange({'searchIncludeSubSelectValue': val})}
                                            />
                                        }
                                    />
                                </List>
                                <List>
                                    <Browser
                                        store={subBrowser}
                                        hasAdvanceSerach
                                        label=" "
                                        type={164}
                                        onChange={(...arg) => {
                                            onSearchChange({searchSubSelectValue: arg[0]})
                                            setState({subBrowserValue: arg[2]})
                                        }}
                                        tabs={tabs}
                                        valueArray={subBrowserValue}
                                    />
                                </List>
                                <List className='border-none'>
                                    <FormItem
                                        noBorder
                                        line
                                        content={
                                            <Select
                                                value={queryParams.searchIncludeDepSelectValue}
                                                options={includedeptData}
                                                label={getLabel(27511, "部门")}
                                                onChange={val => onSearchChange({'searchIncludeDepSelectValue': val})}
                                            />
                                        }
                                    />
                                </List>
                                <List>
                                    <Browser
                                        store={deptBrowser}
                                        hasAdvanceSerach
                                        label=" "
                                        type={4}
                                        tabs={tabs}
                                        onChange={(...arg) => {
                                            onSearchChange({searchDepSelectValue: arg[0]})
                                            setState({deptBrowserValue: arg[2]})
                                        }}
                                        valueArray={deptBrowserValue}
                                    />
                                </List>
                            </Accordion.Panel>
                        </Accordion>
                        <ButtonGroup data={this.getButton()}/>
                    </div>

        )
    }

    getButton = () => {
        const {resetCondition, getTableDatas} = this.store;
        return [{
            key: "reset",
            text: getLabel(2022, "重置"),
            onClick: () => resetCondition(),
        }, {
            key: "search",
            text: getLabel(388113, "搜索"),
            onClick: () => {
                getTableDatas();
                this.props.history.go(-1)
            },
            type: "primary",
        }];
    }

}

